import { Button, Toast } from "antd-mobile";
import React, { Component } from "react";
import "./index.scss";
import { withRouter } from "react-router-dom";
import head from "../../../../assets/images/head.png";
import bg from "../../../../assets/images/bg2.jpg";
import { Modal } from "antd-mobile";
import { post } from "../../../../utils/Axios";
const alert = Modal.alert;

class LoginStatu extends Component {
  // 用户退出
  logOut = () => {
    post("/user/logout").then((result) => {
      localStorage.removeItem("xyzf_user_token");
      Toast.info("ヾ(￣▽￣)Bye~Bye~", 3);
      window.location.reload();
    });
  };

  render() {
    const { isLogin, userInf } = this.props;

    return (
      <div className="LoginStatuWrapper">
        <div className="backGround">
          <img src={bg} alt="" />
        </div>
        <div className="main">
          <div className="HeadPortrait">
            <img className="initImg" src={head} alt="" />
          </div>
          <div className="content">
            <div className="statu">
              {isLogin ? "😀欢迎," + userInf.nickname : "游客"}
            </div>
            <Button
              type="primary"
              onClick={() => {
                if (!isLogin) {
                  this.props.history.push("/loginOrRegister");
                } else {
                  alert(
                    "客官，留步😭",
                    // "因为不知道能不能再见, 所以不知道要不要告别。",
                    <div>
                      <div>因为不知道能不能再见</div>
                      <div>所以不知道要不要告别</div>
                    </div>,
                    [
                      {
                        text: "退出",
                        onPress: () =>
                          post("/user/logout").then((result) => {
                            this.logOut();
                          }),
                      },
                      {
                        text: "取消",
                        onPress: () => {},
                      },
                    ]
                  );
                }
              }}
              activeStyle={{ backgroundColor: "#27ae60" }}
            >
              {isLogin ? "退出" : "去登陆"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(LoginStatu);
